<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <p id="aaa" style="color:red;">aaa</p>
    <div id="app">
        <pre v-pre class="note">
        分支指令
        1、v-show ：通过取值boolean结果，控制元素的 display 样式完成当前元素的显示和隐藏操作
                  语法  v-show="boolean结果【仓库变量、运算表达式结果……】"
                        当值为 true 表示元素需要显示 => 元素会被v-show删除行内样式display:none
                        当值为 false 表示元素不需要显示 => 元素会被v-show增加display:none行内样式
        2、v-if、v-else-if、v-else
            + v-if : 通过取值boolean结果，控制元素创建和删除，完成元素的页面添加或者移除操作
                    当值为 true 表示元素需要显示 => 元素会被创建并替换到页面中
                    当值为 false 表示元素不需要显示 => 元素不会被创建，也不会被写入页面【此时该元素内部的所有vue语法不被执行】
            + v-else-if v-else 为组合指令，不能单独使用，使用时相邻的上一个兄弟元素必须是被v-if或者v-else-if操作的元素【注释不算】

        ** v-show、v-if、v-else-if、v-else 分支指令控制的是当前元素和元素内部的所有结构
        ** v-if的数据安全性要高于v-show
        </pre>
        <p show v-show="flag">
            <span>被控制的元素</span>
            <span>v-show指令</span>
        </p>
        <p if v-if="flag">
            <span>被控制的元素</span>
            <span>v-if指令</span>
        </p>
        <input type="button" value="显示|隐藏" @click="flag=!flag">
        <hr>
        <p v-show="!user.skill">{{ user.name }}-暂无技能数据</p>
        <p v-if="user.skill">{{ user.name }}-html:{{ user.skill.html }}</p>
        <hr>
        <p>
            <input type="button" value="-" @click="num--">
            <span> num:{{ num }} </span> 
            <input type="button" value="+" @click="num++">
        </p>
        |
        <p v-if="num<0" style="color: red;">小于0</p>
        |
        <p v-if="num==0" style="color: blue;">等于0</p>
        |
        <p v-if="num>0" style="color: green;">大于0</p>
        |
        <hr>
        <p v-if="num<0" style="color: red;">小于0</p>
        <!-- | -->
        <p v-else-if="num==0" style="color: blue;">等于0</p>
        <p v-else style="color: green;">大于0</p>

    </div>
    <script type="module">
        /*
            if(条件){                   <标签 v-if|v-show|v-else-if|v-else="条件">
                分支语句                     分支页面
            }                           </标签>
        */
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag:true,
                    user:{
                        name:"张三",
                        // skill:{
                        //     html:"精通"
                        // }
                    },
                    num:0
                }
            }
        }).mount("#app");
    </script>
</body>
</html>